const defaultTheme = require("tailwindcss/defaultTheme");
let defineThemeSpacing = () => {
  let spacing = {};
  for (let i = 1; i <= 200; i++) {
    spacing[i] = `${i}px`;
  }
  return spacing;
};

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {
      screens: {
        mobile: { max: "767px" },
        tablet: { min: "768px", max: "1023px" },
        pad: { min: "768px", max: "1023px" },
        laptop: { min: "1024px", max: "1279px" },
        desktop: { min: "1280px" },
        pc: { min: "1024px" },
        ...defaultTheme.screens,
      },
      colors: {
        btncolor: "#172026",
        btncolorbghover: "#3D88F2",
        bgcolorblue: "#3D88F2",
        textcolor: "#36434D",
      },
      spacing: defineThemeSpacing()
    },
  },
  plugins: [],
};
